<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>摇骰子</title>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <!-- bootstrap CSS -->
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <style>
        body{
            perspective: 500px;
            background-color: #eaa8ff;
            text-align: center;
        }
        #demo {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d;
            transition: all 5s;
        }
        #demo .item{
            width: 100%;
            height: 100%;
            list-style: none;
            position: absolute;
            padding: 0;
            margin: 0;
            display: flex;
            border-radius: 30px;
            background-color: whitesmoke;
        }
        li{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: red;
            margin: 5px;
        }
        .item:nth-child(1){
            align-items: center;
            justify-content: center;
            transform: rotateY(0deg) translateZ(100px);
        }
        .item:nth-child(1) li{
            width: 50px;
            height: 50px;
        }
        .item:nth-child(2){
            justify-content: space-between;
            transform: rotateY(180deg) translateZ(100px);
        }
        .item:nth-child(2) li{
            width: 40px;
            height: 40px;
        }
        .item:nth-child(2) li:nth-child(2){
            align-self: flex-end;
        }
        .item:nth-child(3){
            justify-content: space-between;
            transform: rotateY(90deg) translateZ(100px);
        }
        .item:nth-child(3) li{
            width: 35px;
            height: 35px;
        }
        .item:nth-child(3) li:nth-child(3){
            align-self: flex-end;
        }
        .item:nth-child(3) li:nth-child(2){
            align-self: center;
            justify-content: center;
        }
        .item:nth-child(4) {
            justify-content: space-between;
            flex-wrap: wrap;
            align-content: space-between;
            transform: rotateY(-90deg) translateZ(100px);
        }
        .item:nth-child(4) li{
            width: 35px;
            height: 35px;
            margin: 20px;
        }
        .item:nth-child(5){
            justify-content: space-between;
            flex-wrap: wrap;
            align-content: space-between;
            transform: rotateX(90deg) translateZ(100px);
        }
        .item:nth-child(5) li{
            margin: 8px 15px;
        }
        .item:nth-child(5) li:nth-child(2){
            margin-top: 85px;
        }
        .item:nth-child(6){
            flex-wrap: wrap;
            flex-direction: column;
            justify-content: space-between;
            align-content: space-between;
            transform: rotateX(-90deg) translateZ(100px);
        }
        .item:nth-child(6) li{
            margin: 18px 20px;
        }
        input{
            display: block;
            width: 50px;
            height: 40px;
            margin: 0 auto;
        }
    </style>
    <script>
        $(function () {
            var x_temp; //X轴旋转的周期
            var y_temp; //Y轴旋转的周期
            var init_val = 1;   //点数
            $("#btn").click(function () {
                var x = parseInt(Math.random() * 3600); //生成随机数旋转角度*3600
                var y = parseInt(Math.random() * 3600);
                var xx = x % 90;    //求余，使得最后旋转是一个正面
                var yy = y % 90;    //使用随机角度减去余数，得到一个旋转整数
                $("#demo").css({ transform:'rotateX('+(x-xx)+'deg) rotateY('+(y-yy)+'deg)'});
                //延迟响应5秒
                setTimeout(function(){
                    $(".item").each(function(i){
                        //如果长宽相等
                        if($(this).height() == $(this).width()){
                            // alert("点数：" + (i + 1));
                            $("#res").text(i + 1);
                        }
                    });
                },5100);
            });
        })
    </script>
</head>
<body>
<div id="demo">

    <ul class="item">
        <li></li>
    </ul>
    <ul class="item">
        <li></li>
        <li></li>
    </ul>
    <ul class="item">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="item">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="item">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="item">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<h3>您的点数是：<span id="res"></span></h3>
<div align="center">
    <button id="btn" class="btn btn-success">摇骰子</button>
</div>
</body>
</html>